<template>
    <view @touchmove.stop.prevent="() => false">
        <u-popup :show="show" closeable :round="20" mode="bottom" @close="closeEvent">
            <view class="wifi_title">切换网络</view>
            <scroll-view class="wifi_list_main" scroll-y>
                <view
                    @click="changeWifi(item.SSID)"
                    class="wifi_cell"
                    :class="selWifi == item.SSID ? 'wifi_cell_active' : ''"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <text class="wifi_name">{{ item.SSID }}</text>
                    <text class="wifi_select" v-if="item.SSID == selWifi">已选择</text>
                    <text class="wifi_select" v-else>选择</text>
                </view>
            </scroll-view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'wifi-list-view',
    data() {
        return {};
    },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        list: {
            type: Array,
            default: () => [],
        },
        selWifi: {
            type: String,
            default: '',
        },
    },
    methods: {
        closeEvent() {
            this.$emit('close');
        },
        changeWifi(e) {
            this.$emit('selectWifi', e);
        },
    },
};
</script>

<style>
.wifi_title {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpxrpx;
}
.wifi_list_main {
    width: 100%;
    height: 40vh;
}
.wifi_cell {
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 30rpx;
    border-bottom: 2rpx #eaeaea solid;
    color: #333333;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wifi_cell_active {
    color: #418170;
}
.wifi_name {
    width: 300rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wifi_select {
    font-size: 28rpx;
}
</style>
